<template>
	<div>
		<div class="headerStyle"></div>

		<div class="marketTitle">
			<image class="headerImageSize" src="../../../static/market/icons.png" alt="" />
		</div>
		<div class="TipsTime show-box">
			<!-- 上午场10：00前，结算时间次日11：20后
			下午场14：00前，结算时间次日15：20后
			傍晚场16：00前，结算时间次日17：20后
			晚上场18：00前，结算时间次日19：20后 -->
			<!-- 交易市场时间：上午场：10：00前，下午场：15:00，晚上场：19:00 -->
			<!-- <semp-notice-bar scrollable showType="slider" strText="上午场10：00前，结算时间次日11：20后,下午场14：00前，结算时间次日15：20后,傍晚场16：00前，结算时间次日17：20后,晚上场18：00前，结算时间次日19：20后"  icon='' color=""></semp-notice-bar> -->
		</div>
		<div class="searchArea" v-if="searchShow">
			<searchBox icon="search" :borderStyle="border" @search="handleSendKey" />
		</div>
	</div>
</template>

<script>
	import sempNoticeBar from "@/components/semp-notice-bar/semp-notice-bar.vue"
	import searchBox from "../searchBox/searchBox.vue"
	export default {
		name: 'headerCom',
		data() {
			return {
				border: {
					border: '4rpx solid #1F1F1F'
				},
			}
		},
		props: {
			searchShow: {
				type: Boolean,
				default: true
			}
		},
		components: {
			searchBox,
			sempNoticeBar
		},
		methods: {
			handleSendKey(value) {
				this.$emit('target', value)
			}
		}
	}
</script>

<style scoped lang="less">
	.headerStyle {
		width: 100%;
		height: 200rpx;
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		background: linear-gradient( 180deg, #FFA2A2 0%, rgba(255,162,162,0) 100%);
	}

	.headerImageSize {
		width: 564rpx;
		height: 56rpx;
	}

	.TipsTime {
		width: 100%;
		height: 48rpx;
		// background: linear-gradient(270deg, #FFFFFF 0%, var(--tm-themeColor-level1) 100%);
		// border-radius: 8rpx;
		// border: 2rpx solid #FFFFFF;
		// font-weight: 400;
		// font-size: 22rpx;
		// overflow: hidden;
		// color: #1F1F1F;
		// display: flex;
		// align-items: center;
		// padding: 0 20rpx;
		// box-sizing: border-box;
		// margin-top: 16rpx;
		// margin-bottom: 80rpx;
	}

	.searchArea {
		margin-bottom: 28rpx;
	}
</style>